<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/default/easyui.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/themes/icon.css"></link>
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.5/demo/demo.css"></link>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/jquery.easyui.min.js"></script>
	<script language="JavaScript"  type="text/javascript" src="js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
	
	<script type="text/javascript">
	 /*<![CDATA[*/ 
	            
	     function myformatter(date){
			var y = date.getFullYear();
			var m = date.getMonth()+1;
			var d = date.getDate();
			return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
		}
		function myparser(s){
			if (!s) return new Date();
			var ss = (s.split('-'));
			var y = parseInt(ss[0],10);
			var m = parseInt(ss[1],10);
			var d = parseInt(ss[2],10);
			if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
				return new Date(y,m-1,d);
			} else {
				return new Date();
			}
		}
	function showFoodList()
	{
		$.get("/getFoodCount", function(data){
				$("#table").datagrid("loadData", data);
			});
	}
	
	 $(document).ready(  
			  function(){
				  
				  var curr_time = new Date(); 
				  $("#sdate").datebox("setValue",myformatter(curr_time)); 
				  $("#edate").datebox("setValue",myformatter(curr_time)); 
				  
				  $('#foodname').textbox('textbox').keydown(function (e) {
					  if (e.keyCode == 13) {
						  mysearch();
				      }
				  });
				  
				  mysearch();
					   
			  });
	 
	   
	    
	 	function progressFormatter(value,rowData){  
	 		 
	 	        return "<b>"+value+"</b>"+" 份";   
		}  
	 	
	 	function mysearch()
	 	{
	 		 var sdate = $('#sdate').datebox('getValue');
	    	 var edate = $('#edate').datebox('getValue');
	    	 var foodname = encodeURIComponent($('#foodname').val());

			 $('#table').datagrid('loading');
	    	 var url = "/getFoodCount?sdate="+sdate+"&edate="+edate+"&foodname="+foodname;
	    	 $.get(url, function(data){
					$("#table").datagrid("loadData", data);
					$('#table').datagrid('loaded');
				});
	    	 
	 	}
	 	/*]]>*/  
	</script>
	
	
</head>
<body>

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%" id="pp1">
<table id="table" class="easyui-datagrid" title="菜品销量排行" style="width:550px;height:100%;"
			data-options="singleSelect:true,collapsible:false,rownumbers: true,toolbar:'#tb'">
		<thead>
			<tr>
				<th data-options="field:'foodname'" width="50%">菜品</th>
				<th data-options="field:'score',formatter:progressFormatter" width="50%">销量</th>
			</tr>
		</thead>
	</table>
</div>

<div id="tb" style="padding:2px 5px;">
		起始日期: <input class="easyui-datebox" id="sdate" data-options="formatter:myformatter,parser:myparser" style="width:95px"/>
		截至日期: <input class="easyui-datebox" id="edate" data-options="formatter:myformatter,parser:myparser" style="width:95px"/>
		菜品名:<input class="easyui-textbox"  data-options="prompt:'按回车查询'" name ="foodname"  id="foodname" style="width:80px"/>
		<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="mysearch()">查询</a>
	</div>
	
</body>
</html>